<template>
	<view class="login-container">
		<!-- 背景装饰 -->
		<view class="bg-decoration">
			<view class="golden-line line-1"></view>
			<view class="golden-line line-2"></view>
			<view class="golden-circle circle-1"></view>
			<view class="golden-circle circle-2"></view>
			<view class="golden-circle circle-3"></view>
		</view>

		<!-- Logo区域 -->
		<view class="logo-section">
			<view class="logo-container">
				<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
				<view class="logo-glow"></view>
			</view>
			<text class="app-name">奥斯卡英语</text>
			<text class="app-subtitle">OSCAR ENGLISH</text>
			<text class="app-desc">Oscar English · 专业 · 高效 · 卓越</text>
			<view class="golden-divider"></view>

			<!-- 激励语句 -->
			<view class="motivation-section">
				<text class="motivation-en">"Knowledge is power"</text>
				<text class="motivation-cn">知识就是力量</text>
				<text class="motivation-en">"Practice makes perfect"</text>
				<text class="motivation-cn">熟能生巧</text>
				<text class="motivation-en">"Learning English opens new doors"</text>
				<text class="motivation-cn">学习英语开启新世界</text>
			</view>
		</view>

		<!-- 登录表单 -->
		<view class="login-form">
			<!-- 用户协议 -->
			<view class="privacy-agreement">
				<view class="checkbox-container" @click="toggleAgreement">
					<view class="checkbox" :class="{ 'checked': isAgreed }">
						<text class="checkmark" v-if="isAgreed">✓</text>
					</view>
					<view class="agreement-content">
						<text class="agreement-text">我已经阅读并同意</text>
						<text class="agreement-link" @click.stop="showUserAgreement">《用户服务协议》</text>
						<text class="agreement-text">和</text>
						<text class="agreement-link" @click.stop="showPrivacyPolicy">《隐私保护指引》</text>
					</view>
				</view>
			</view>

			<!-- 微信登录按钮 -->
			<view class="wechat-login" :class="{ 'disabled': !isAgreed }" @click="handleWechatLogin">
				<view class="wechat-icon">
					<image class="wechat-img" src="/static/微信.png" mode="aspectFit"></image>
				</view>
				<text class="wechat-text">微信一键登录</text>
				<view class="login-arrow">→</view>
			</view>

			<!-- 登录提示 -->
			<view class="login-tip">
				<text class="tip-text">开启你的学习之旅</text>
				<text class="tip-sub">Start your learning journey</text>
			</view>
		</view>

		<!-- 信息填写弹窗 -->
		<view class="modal-overlay" v-if="showInfoModal" @click="closeModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">完善信息</text>
					<text class="modal-subtitle">首次登录，请完善您的个人信息</text>
					<view class="close-btn" @click="closeModal">
						<text class="close-icon">×</text>
					</view>
				</view>

				<view class="modal-body">
					<view class="form-item">
						<text class="label">学生姓名 <text style="color: #00B8D4;">*</text></text>
						<input class="input" v-model="formData.studentName" placeholder="请输入学生姓名（必填）"
							placeholder-class="placeholder" />
					</view>

					<view class="form-item">
						<text class="label">家长手机号 <text style="color: #00B8D4;">*</text></text>
						<input class="input" v-model="formData.parentPhone" placeholder="请输入家长手机号（必填）"
							placeholder-class="placeholder" type="number" maxlength="11" />
					</view>
				</view>

				<view class="modal-footer">
					<button class="cancel-btn" @click="closeModal">取消</button>
					<button class="submit-btn" @click="handleSubmitInfo">确认提交</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getApiUrl,
		getRequestConfig
	} from '@/config/api.js'

	export default {
		data() {
			return {
				showInfoModal: false,
				formData: {
					studentName: '',
					parentPhone: ''
				},
				wechatCode: '', // 存储微信授权码
				isLoggingIn: false, // 防止重复点击
				isAgreed: false // 隐私政策协议同意状态
			}
		},
		onLoad() {
			// 检查是否已登录
			this.checkLoginStatus()
		},
		methods: {
			checkLoginStatus() {
				const token = uni.getStorageSync('token')
				const userInfo = uni.getStorageSync('userInfo')

				if (token && userInfo) {
					// 已登录，根据用户角色跳转到不同页面
					if (userInfo.role === 1) {
						// 管理员跳转到管理员首页
						uni.reLaunch({
							url: '/pages/admin/index'
						})
					} else {
						// 学生跳转到学生首页
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				}
			},

			toggleAgreement() {
				this.isAgreed = !this.isAgreed
			},

			handleWechatLogin() {
				// 检查是否同意用户协议
				if (!this.isAgreed) {
					uni.showToast({
						title: '请先同意用户服务协议和隐私保护指引',
						icon: 'none'
					})
					return
				}

				// 防止重复点击
				if (this.isLoggingIn) {
					uni.showToast({
						title: '正在登录中，请稍候',
						icon: 'none'
					})
					return
				}

				this.isLoggingIn = true
				uni.showLoading({
					title: '登录中...'
				})

				// 调用微信登录
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						console.log('微信登录成功:', loginRes)
						this.wechatCode = loginRes.code

						// 检查用户是否已存在
						this.checkUserExists()
					},
					fail: (err) => {
						console.error('微信登录失败:', err)
						this.isLoggingIn = false
						uni.hideLoading()
						uni.showToast({
							title: '微信登录失败',
							icon: 'none'
						})
					}
				})
			},

			checkUserExists() {
				// 调用后端API检查用户是否存在
				uni.request({
					url: getApiUrl('/api/user/check-user'),
					method: 'POST',
					header: {
						'Content-Type': 'application/json'
					},
					data: {
						code: this.wechatCode
					},
					success: (res) => {
						uni.hideLoading()
						this.isLoggingIn = false
						console.log('检查用户状态:', res.data)

						if (res.data.code === 200) {
							const data = res.data.data
							if (data.exists) {
								// 用户已存在，直接登录成功
								uni.showToast({
									title: '登录成功',
									icon: 'success',
									duration: 1500
								})
								this.saveUserInfoAndRedirect(data.user, data.token)
							} else {
								// 用户不存在，显示信息填写表单
								uni.showToast({
									title: '微信授权成功',
									icon: 'success',
									duration: 1500
								})
								setTimeout(() => {
									this.showInfoModal = true
								}, 1500)
							}
						} else if (res.data.code === 500 && res.data.message && res.data.message.includes(
								'授权码已被使用')) {
							// 授权码已被使用，重新获取
							console.log('授权码已被使用，重新获取...')
							uni.showToast({
								title: '重新获取授权码',
								icon: 'none',
								duration: 1000
							})
							setTimeout(() => {
								this.handleWechatLogin()
							}, 1000)
						} else {
							// 其他错误，显示错误信息
							uni.showToast({
								title: res.data.message || '登录失败',
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						console.error('检查用户状态失败:', err)
						uni.hideLoading()
						this.isLoggingIn = false
						// 网络错误，显示错误信息
						uni.showToast({
							title: '网络错误，请重试',
							icon: 'none'
						})
					}
				})
			},

			checkFirstLogin() {
				// 直接显示信息填写表单，确保学生必须填写信息
				this.showInfoModal = true
			},

			onIdentityChange(e) {
				// This method is no longer needed as identity is removed
			},

			handleSubmitInfo() {
				// 表单验证
				if (!this.formData.studentName.trim()) {
					uni.showToast({
						title: '请输入学生姓名',
						icon: 'none'
					})
					return
				}

				// 学生身份必须验证手机号
				if (!this.formData.parentPhone.trim()) {
					uni.showToast({
						title: '请输入家长手机号',
						icon: 'none'
					})
					return
				}

				if (!/^1[3-9]\d{9}$/.test(this.formData.parentPhone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}

				uni.showLoading({
					title: '提交中...'
				})

				// 重新获取授权码，确保使用新的授权码
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						console.log('重新获取授权码成功:', loginRes)
						this.wechatCode = loginRes.code

						// 使用新的授权码提交用户信息
						this.submitUserInfo()
					},
					fail: (err) => {
						console.error('重新获取授权码失败:', err)
						uni.hideLoading()
						uni.showToast({
							title: '获取授权码失败',
							icon: 'none'
						})
					}
				})
			},

			submitUserInfo() {
				// 调用后端API提交用户信息
				uni.request({
					url: getApiUrl('/api/user/wechat-login'),
					method: 'POST',
					header: {
						'Content-Type': 'application/json'
					},
					data: {
						code: this.wechatCode,
						name: this.formData.studentName,
						phone: this.formData.parentPhone,
						role: 0 // 所有用户默认为学生角色
					},
					success: (res) => {
						uni.hideLoading()
						console.log('提交用户信息:', res.data)

						if (res.data.code === 200) {
							const data = res.data.data
							this.saveUserInfoAndRedirect(data.user, data.token)
						} else if (res.data.code === 500 && res.data.message && res.data.message.includes(
								'授权码已被使用')) {
							// 授权码已被使用，重新获取
							console.log('提交时授权码已被使用，重新获取...')
							uni.showToast({
								title: '重新获取授权码',
								icon: 'none',
								duration: 1000
							})
							setTimeout(() => {
								this.handleSubmitInfo()
							}, 1000)
						} else {
							uni.showToast({
								title: res.data.message || '提交失败',
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						console.error('提交用户信息失败:', err)
						uni.hideLoading()
						uni.showToast({
							title: '网络错误，请重试',
							icon: 'none'
						})
					}
				})
			},

			saveUserInfoAndRedirect(user, token) {
				// 保存用户信息和token
				uni.setStorageSync('token', token)
				uni.setStorageSync('userInfo', {
					id: user.id,
					wechatId: user.wechatId,
					name: user.name,
					phone: user.phone,
					role: user.role,
					createTime: user.createTime
				})

				uni.showToast({
					title: '登录成功',
					icon: 'success'
				})

				// 根据用户角色跳转到不同页面
				setTimeout(() => {
					if (user.role === 1) {
						// 管理员跳转到管理员首页
						uni.reLaunch({
							url: '/pages/admin/index',
							fail: (err) => {
								console.error('跳转到管理员首页失败:', err)
								uni.showToast({
									title: '页面跳转失败',
									icon: 'none'
								})
							}
						})
					} else {
						// 学生跳转到学生首页
						uni.switchTab({
							url: '/pages/index/index',
							fail: (err) => {
								console.error('跳转到学生首页失败:', err)
								uni.showToast({
									title: '页面跳转失败',
									icon: 'none'
								})
							}
						})
					}
				}, 1500)
			},

			showUserAgreement() {
				uni.showModal({
					title: '用户服务协议',
					content: '《用户服务协议》\n\n第一条 服务内容\n奥斯卡服务（以下简称"本平台"）是为方便线下用户而开发的服务类型小程序，内容包括支持查询客户的剩余课时信息、线上课时充值、预约单独辅导等功能。\n\n第二条 用户注册与账户\n2.1 用户通过微信授权登录本平台，即表示同意本协议的全部条款。\n2.2 用户应提供真实、准确、完整的个人信息，包括但不限于学生姓名、家长联系方式等。\n2.3 用户应妥善保管账户信息，不得将账户转让、出借给他人使用。\n2.4 如发现账户被盗用或存在安全风险，用户应立即通知本平台。\n\n第三条 服务使用规范\n3.1 用户应遵守国家法律法规，不得利用本平台从事违法活动。\n3.2 用户应尊重知识产权，不得复制、传播本平台的课程内容。\n3.3 用户应文明使用平台，不得发布不当言论或骚扰其他用户。\n3.4 用户应按时参加预约的课程，如需取消应提前告知。\n\n第四条 课程服务\n4.1 课时剩余量以平台管理员公示的数字为标准，用户课时量剩余不足时由本平台自行负责对接。\n4.2 本平台承诺不会通过任何途径私自获取用户的其他信息，给用户提供一个安全、整洁、美观的服务型小程序\n4.3 如因平台原因导致充值课程无法正常进行，第一时间联系我们解决。\n\n第五条 课时管理\n5.1 用户可通过平台查询剩余课时，合理安排学习计划。\n5.2 课时充值后不可退款，但可在有效期内使用。\n5.3 本平台保留对课时使用规则进行调整的权利。\n\n第六条 免责声明\n6.1 本平台不对用户的学习效果做出保证承诺。\n6.2 因不可抗力因素导致的服务中断，本平台不承担责任。\n6.3 用户因违反本协议造成的损失，本平台不承担责任。\n\n第七条 协议修改\n7.1 本平台有权根据业务发展需要修改本协议。\n7.2 协议修改后，本平台将通过平台公告等方式通知用户。\n7.3 用户继续使用服务即表示接受修改后的协议。\n\n第八条 争议解决\n8.1 本协议适用中华人民共和国法律。\n8.2 因本协议产生的争议，双方应友好协商解决。\n8.3 协商不成的，可向本平台所在地人民法院提起诉讼。',
					showCancel: false,
					confirmText: '我知道了'
				})
			},

			showPrivacyPolicy() {
				uni.showModal({
					title: '隐私保护指引',
					content: '《隐私保护指引》\n\n一、信息收集\n我们收集的信息包括：\n1.1 账户信息：微信授权登录时获取的基本信息，如微信昵称、头像等。\n1.2 个人信息：学生姓名、家长联系方式、学习记录等。\n1.3 设备信息：设备型号、操作系统、网络状态等。\n1.4 使用数据：课程预约记录、学习时长、页面访问记录等。\n\n二、信息使用\n我们使用收集的信息用于：\n2.1 提供服务：课程预约、课时管理、学习进度跟踪等核心功能。\n2.2 个性化体验：根据学习记录推荐合适的课程和学习计划。\n2.3 服务改进：分析用户行为，优化平台功能和用户体验。\n2.4 安全保障：身份验证、防止欺诈、维护平台安全。\n\n三、信息共享\n我们承诺：\n3.1 不向第三方出售用户的个人信息。\n3.2 不向第三方提供用户的详细学习记录。\n3.3 仅在必要时与以下机构共享信息：\n   - 教育主管部门（法律法规要求）\n   - 合作的教育机构（经用户同意）\n   - 技术服务提供商（签署保密协议）\n\n四、信息保护\n我们采取的保护措施：\n4.1 技术保护：使用加密技术保护数据传输和存储。\n4.2 访问控制：严格限制员工对用户信息的访问权限。\n4.3 安全审计：定期进行安全评估和漏洞检测。\n4.4 应急响应：建立数据泄露应急响应机制。\n\n五、用户权利\n用户享有以下权利：\n5.1 知情权：了解我们如何收集、使用和保护个人信息。\n5.2 访问权：查看、更正或删除个人信息的权利。\n5.3 选择权：选择是否提供某些个人信息。\n5.4 投诉权：对隐私保护问题提出投诉和建议。\n\n六、儿童隐私保护\n6.1 我们特别重视未成年人的隐私保护。\n6.2 收集未成年人信息需获得家长或监护人的明确同意。\n6.3 家长或监护人可随时要求删除未成年人的个人信息。\n\n七、信息保留\n7.1 我们仅在必要期间内保留用户信息。\n7.2 用户注销账户后，我们将在合理时间内删除相关信息。\n7.3 法律法规要求保留的信息除外。\n\n八、跨境传输\n8.1 如需要向境外传输个人信息，我们将遵守相关法律法规。\n8.2 确保接收方提供同等级别的隐私保护。\n\n九、政策更新\n9.1 我们可能根据业务发展需要更新本隐私政策。\n9.2 重大变更将通过平台公告、邮件等方式通知用户。\n9.3 继续使用服务即表示接受更新后的隐私政策。\n\n十、联系我们\n如您对本隐私政策有任何疑问或建议，请通过以下方式联系我们：\n客服热线：18308909937\n客服微信：18308909937\n邮箱地址：2667062744@qq.com\n我们承诺认真对待每一位用户的隐私保护需求，持续改进隐私保护措施，为用户提供安全、可靠的学习环境。',
					showCancel: false,
					confirmText: '我知道了'
				})
			},

			closeModal() {
				this.showInfoModal = false
				this.wechatCode = '' // 清空微信授权码，以便重新登录
				this.formData.studentName = ''
				this.formData.parentPhone = ''
				uni.showToast({
					title: '已关闭信息填写弹窗',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 50%, #1E2332 100%);
		position: relative;
		overflow: hidden;
	}

	.bg-decoration {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;

		.golden-line {
			position: absolute;
			background: linear-gradient(to right, #00B8D4, #1976D2);
			opacity: 0.3;
			filter: blur(10px);

			&.line-1 {
				width: 100%;
				height: 2px;
				top: 20%;
				left: 0;
			}

			&.line-2 {
				width: 100%;
				height: 2px;
				bottom: 20%;
				left: 0;
			}
		}

		.golden-circle {
			position: absolute;
			border-radius: 50%;
			background: linear-gradient(135deg, rgba(0, 184, 212, 0.15) 0%, rgba(25, 118, 210, 0.15) 100%);
			filter: blur(10px);

			&.circle-1 {
				width: 200rpx;
				height: 200rpx;
				top: 10%;
				right: -50rpx;
			}

			&.circle-2 {
				width: 150rpx;
				height: 150rpx;
				top: 60%;
				left: -30rpx;
			}

			&.circle-3 {
				width: 100rpx;
				height: 100rpx;
				bottom: 20%;
				right: 20%;
			}
		}
	}

	.logo-section {
		position: relative;
		z-index: 2;
		padding: 120rpx 40rpx 80rpx;
		text-align: center;

		.logo-container {
			position: relative;
			margin-bottom: 30rpx;

			.logo {
				width: 300rpx;
				height: 300rpx;
				border-radius: 50rpx;
			}

			.logo-glow {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 30rpx;
				background: radial-gradient(circle at center, rgba(0, 184, 212, 0.3), transparent 70%);
				opacity: 0.5;
				pointer-events: none;
				z-index: -1;
			}
		}

		.app-name {
			display: block;
			font-size: 52rpx;
			color: #00B8D4;
			font-weight: 800;
			margin-bottom: 12rpx;
			text-shadow: 0 0 20rpx rgba(0, 184, 212, 0.5);
			letter-spacing: 6rpx;
			font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
			background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				bottom: -8rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 80%;
				height: 3rpx;
				background: linear-gradient(to right, transparent, #00B8D4, transparent);
				border-radius: 2rpx;
			}
		}

		.app-subtitle {
			display: block;
			font-size: 28rpx;
			color: #AAB4BE;
			margin-bottom: 20rpx;
			letter-spacing: 4rpx;
			font-weight: 400;
			text-transform: uppercase;
			text-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
		}

		.app-desc {
			font-size: 26rpx;
			color: #AAB4BE;
			letter-spacing: 4rpx;
			font-weight: 400;
			line-height: 1.6;

			&::before {
				content: '★';
				color: #00B8D4;
				margin-right: 8rpx;
			}

			&::after {
				content: '★';
				color: #00B8D4;
				margin-left: 8rpx;
			}
		}

		.golden-divider {
			width: 100rpx;
			height: 4rpx;
			background: linear-gradient(to right, #00B8D4, #1976D2);
			margin: 40rpx auto;
			border-radius: 2rpx;
			box-shadow: 0 0 20rpx rgba(0, 184, 212, 0.5);
		}

		.motivation-section {
			margin-top: 40rpx;
			text-align: center;
			padding: 30rpx;
			background: rgba(0, 184, 212, 0.05);
			border-radius: 16rpx;
			border: 1rpx solid rgba(0, 184, 212, 0.1);

			.motivation-en {
				display: block;
				font-size: 28rpx;
				color: #00B8D4;
				font-weight: 500;
				margin-bottom: 8rpx;
				font-style: italic;
				letter-spacing: 2rpx;
				text-shadow: 0 0 10rpx rgba(0, 184, 212, 0.3);
			}

			.motivation-cn {
				display: block;
				font-size: 24rpx;
				color: #AAB4BE;
				margin-bottom: 20rpx;
				letter-spacing: 1rpx;
			}
		}
	}

	.login-form {
		position: relative;
		z-index: 2;
		padding: 0 20rpx;
		animation: slideUp 0.8s ease-out;
	}

	@keyframes slideUp {
		from {
			opacity: 0;
			transform: translateY(60rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@keyframes pulse {
		0%, 100% {
			box-shadow: 0 0 20rpx rgba(0, 184, 212, 0.3);
		}
		50% {
			box-shadow: 0 0 30rpx rgba(0, 184, 212, 0.5);
		}
	}

	.privacy-agreement {
		margin-bottom: 40rpx;
		padding: 0 40rpx;

		.checkbox-container {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding: 24rpx 28rpx;
			background: rgba(26, 31, 46, 0.6);
			border-radius: 12rpx;
			border: 1rpx solid rgba(0, 184, 212, 0.2);
			backdrop-filter: blur(8rpx);
			position: relative;
			transition: all 0.3s ease;
			
			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(135deg, rgba(0, 184, 212, 0.03) 0%, rgba(25, 118, 210, 0.03) 100%);
				border-radius: 12rpx;
				z-index: -1;
			}

			&:active {
				transform: scale(0.99);
				border-color: rgba(0, 184, 212, 0.3);
			}

			.checkbox {
				width: 36rpx;
				height: 36rpx;
				border: 2rpx solid rgba(0, 184, 212, 0.5);
				border-radius: 6rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 16rpx;
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				background: rgba(255, 255, 255, 0.03);
				flex-shrink: 0;

				&.checked {
					background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
					border-color: #00B8D4;
					box-shadow: 0 0 12rpx rgba(0, 184, 212, 0.3);
				}

				.checkmark {
					color: #FFFFFF;
					font-size: 22rpx;
					font-weight: bold;
					text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
				}
			}

			.agreement-content {
				flex: 1;
				line-height: 1.5;

				.agreement-text {
					font-size: 26rpx;
					color: #E0E6ED;
					margin-right: 6rpx;
					font-weight: 400;
				}

				.agreement-link {
					font-size: 26rpx;
					color: #00B8D4;
					text-decoration: none;
					font-weight: 500;
					position: relative;
					margin: 0 2rpx;
					transition: all 0.2s ease;

					&:active {
						color: #1976D2;
						transform: scale(1.02);
					}
				}
			}
		}
	}

	.wechat-login {
		background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
		border-radius: 12rpx;
		padding: 32rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 40rpx 40rpx;
		box-shadow: 
			0 6rpx 20rpx rgba(0, 184, 212, 0.25),
			0 2rpx 8rpx rgba(0, 184, 212, 0.15);
		border: 1rpx solid rgba(0, 184, 212, 0.3);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		overflow: hidden;

		&:active {
			transform: scale(0.98);
			box-shadow: 
				0 4rpx 12rpx rgba(0, 184, 212, 0.3),
				0 1rpx 4rpx rgba(0, 184, 212, 0.2);
		}

		&.disabled {
			background: linear-gradient(135deg, #4A5568 0%, #2D3748 100%);
			box-shadow: 
				0 4rpx 12rpx rgba(74, 85, 104, 0.2),
				0 1rpx 4rpx rgba(74, 85, 104, 0.1);
			border-color: rgba(74, 85, 104, 0.3);
			opacity: 0.6;

			&:active {
				transform: none;
			}

			.wechat-text {
				color: #A0AEC0;
			}

			.login-arrow {
				color: #A0AEC0;
			}

			.wechat-icon {
				opacity: 0.5;
			}
		}

		.wechat-icon {
			width: 48rpx;
			height: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 16rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 8rpx;
			transition: all 0.3s ease;

			.wechat-img {
				width: 40rpx;
				height: 40rpx;
				filter: drop-shadow(0 1rpx 2rpx rgba(0, 0, 0, 0.2));
			}
		}

		.wechat-text {
			font-size: 30rpx;
			color: #FFFFFF;
			font-weight: 600;
			flex-grow: 1;
			text-align: center;
			text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
			letter-spacing: 1rpx;
		}

		.login-arrow {
			font-size: 28rpx;
			color: #FFFFFF;
			margin-left: 16rpx;
			font-weight: bold;
			text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
			transition: transform 0.3s ease;
		}

		&:not(.disabled):active .login-arrow {
			transform: translateX(2rpx);
		}
	}

	.login-tip {
		text-align: center;
		margin: 0 40rpx 60rpx;
		padding: 24rpx 20rpx;
		background: rgba(26, 31, 46, 0.4);
		border-radius: 12rpx;
		border: 1rpx solid rgba(0, 184, 212, 0.15);
		backdrop-filter: blur(8rpx);
		position: relative;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(135deg, rgba(0, 184, 212, 0.02) 0%, rgba(25, 118, 210, 0.02) 100%);
			border-radius: 12rpx;
			z-index: -1;
		}

		.tip-text {
			display: block;
			font-size: 28rpx;
			color: #E0E6ED;
			font-weight: 500;
			margin-bottom: 8rpx;
			letter-spacing: 1rpx;
		}

		.tip-sub {
			display: block;
			font-size: 22rpx;
			color: #9CA3AF;
			letter-spacing: 2rpx;
			font-weight: 400;
			font-style: italic;
			opacity: 0.8;
		}
	}

	@keyframes sparkle {
		0%, 100% {
			opacity: 0.6;
			transform: scale(1);
		}
		50% {
			opacity: 1;
			transform: scale(1.1);
		}
	}

	.placeholder {
		color: #999999;
	}

	/* Modal Styles */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.85);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
		backdrop-filter: blur(10rpx);
		animation: fadeIn 0.3s ease-out;
	}

	.modal-content {
		background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 100%);
		border-radius: 24rpx;
		width: 92%;
		max-width: 650rpx;
		max-height: 80vh;
		overflow: hidden;
		position: relative;
		z-index: 1001;
		box-shadow: 
			0 20rpx 60rpx rgba(0, 0, 0, 0.6),
			0 8rpx 24rpx rgba(0, 0, 0, 0.4),
			0 0 0 1rpx rgba(0, 184, 212, 0.2);
		border: 2rpx solid rgba(0, 184, 212, 0.4);
		animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(135deg, rgba(0, 184, 212, 0.05) 0%, rgba(25, 118, 210, 0.05) 100%);
			border-radius: 24rpx;
			z-index: -1;
		}
	}

	@keyframes modalSlideIn {
		from {
			opacity: 0;
			transform: scale(0.9) translateY(60rpx);
		}
		to {
			opacity: 1;
			transform: scale(1) translateY(0);
		}
	}

	.modal-header {
		padding: 50rpx 40rpx 40rpx;
		text-align: center;
		border-bottom: 2rpx solid rgba(0, 184, 212, 0.15);
		position: relative;
		background: linear-gradient(135deg, rgba(0, 184, 212, 0.08) 0%, rgba(25, 118, 210, 0.08) 100%);

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 60%;
			height: 2rpx;
			background: linear-gradient(to right, transparent, #00B8D4, transparent);
		}

		.modal-title {
			display: block;
			font-size: 40rpx;
			color: #00B8D4;
			font-weight: bold;
			margin-bottom: 16rpx;
			text-shadow: 
				0 0 20rpx rgba(0, 184, 212, 0.4),
				0 2rpx 4rpx rgba(0, 0, 0, 0.3);
			letter-spacing: 2rpx;
			position: relative;

			&::before {
				content: '📋';
				margin-right: 12rpx;
				font-size: 36rpx;
			}
		}

		.modal-subtitle {
			display: block;
			font-size: 28rpx;
			color: #AAB4BE;
			font-weight: 400;
			line-height: 1.4;
		}

		.close-btn {
			width: 70rpx;
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			background: linear-gradient(135deg, rgba(244, 67, 54, 0.1) 0%, rgba(244, 67, 54, 0.2) 100%);
			position: absolute;
			top: 25rpx;
			right: 25rpx;
			z-index: 1002;
			border: 2rpx solid rgba(244, 67, 54, 0.3);
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			backdrop-filter: blur(10rpx);

			&:active {
				background: linear-gradient(135deg, rgba(244, 67, 54, 0.2) 0%, rgba(244, 67, 54, 0.3) 100%);
				transform: scale(0.95);
				box-shadow: 0 4rpx 12rpx rgba(244, 67, 54, 0.3);
			}
		}

		.close-icon {
			font-size: 44rpx;
			color: #f44336;
			font-weight: bold;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
		}
	}

	.modal-body {
		padding: 40rpx;

		.form-item {
			margin-bottom: 30rpx;

			.label {
				display: block;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-bottom: 16rpx;
			}

			.input {
				width: 100%;
				height: 80rpx;
				background: rgba(255, 255, 255, 0.05);
				border-radius: 12rpx;
				padding: 0 24rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				border: 1rpx solid rgba(0, 184, 212, 0.3);
				box-sizing: border-box;

				&:focus {
					border-color: #00B8D4;
					background: rgba(0, 184, 212, 0.05);
					box-shadow: 0 0 10rpx rgba(0, 184, 212, 0.2);
				}
			}
		}
	}

	.modal-footer {
		padding: 30rpx 40rpx 40rpx;
		display: flex;
		justify-content: center;
		border-top: 2rpx solid rgba(0, 184, 212, 0.1);
		background: linear-gradient(135deg, rgba(0, 184, 212, 0.03) 0%, rgba(25, 118, 210, 0.03) 100%);

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 60%;
			height: 2rpx;
			background: linear-gradient(to right, transparent, rgba(0, 184, 212, 0.3), transparent);
		}
	}

	.cancel-btn {
		width: 240rpx;
		height: 88rpx;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.05) 100%);
		border-radius: 44rpx;
		color: #AAB4BE;
		font-size: 32rpx;
		font-weight: 500;
		border: 2rpx solid rgba(0, 184, 212, 0.2);
		backdrop-filter: blur(10rpx);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(0, 184, 212, 0.1), transparent);
			transition: left 0.6s ease;
		}

		&:active {
			transform: scale(0.96);
			background: linear-gradient(135deg, rgba(0, 184, 212, 0.15) 0%, rgba(0, 184, 212, 0.1) 100%);
			color: #00B8D4;
			border-color: rgba(0, 184, 212, 0.4);

			&::before {
				left: 100%;
			}
		}
	}

	.submit-btn {
		width: 240rpx;
		height: 88rpx;
		background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
		border-radius: 44rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 600;
		border: none;
		box-shadow: 
			0 6rpx 20rpx rgba(25, 118, 210, 0.4),
			0 3rpx 10rpx rgba(25, 118, 210, 0.3),
			inset 0 1rpx 0 rgba(255, 255, 255, 0.2);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		overflow: hidden;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
			transition: left 0.6s ease;
		}

		&::after {
			content: '✓';
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translateY(-50%);
			font-size: 24rpx;
			opacity: 0.8;
		}

		&:active {
			transform: scale(0.96) translateY(2rpx);
			box-shadow: 
				0 3rpx 10rpx rgba(25, 118, 210, 0.6),
				0 1rpx 5rpx rgba(25, 118, 210, 0.4),
				inset 0 1rpx 0 rgba(255, 255, 255, 0.3);

			&::before {
				left: 100%;
			}
		}
	}
</style>
